<template>
  <div id="mountNode"></div>
</template>


<script setup>
// import G6 from '@antv/g6'
import { ref } from "vue";

import { VueFlow, useVueFlow } from "@vue-flow/core";
var _extends =
  Object.assign ||
  function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];
      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }
    return target;
  };

// 接受父组件传递的数据
// props: {
//   vueFlowModelData: {
//     type: Object,
//     required: true
//   }
// }

// var colorMap = {
//   已完成: "#1E63EE",
//   待执行: "#D8D8D8",
// };
// var data = {
//   nodes: [
//     {
//       id: "1",
//       label: "公司1",
//       labelCfg: {
//         style: {
//           // 标签的样式属性。
//           fill: "red", // 文本颜色
//           fontSize: 20, // 文本大小
//           fill: "#00FFFF", // 节点填充色
//           backgroundColor: "#FFFF00",
//           stroke: "#FFFF00",
//           offset: 20,
//           width: 150,
//         },
//       },
//     },
//     {
//       id: "2",
//       label: "确认模型",
//     },
//     {
//       id: "3",
//       label: "公司3",
//     },
//     {
//       id: "4",
//       label: "公司4",
//     },
//     {
//       id: "5",
//       label: "公司5",
//     },
//     {
//       id: "6",
//       label: "公司6",
//     },
//     {
//       id: "7",
//       label: "公司7",
//     },
//   ],
//   edges: [
//     {
//       source: "1",
//       target: "2",
//       data: {
//         type: "已完成",
//         amount: "张三",
//         date: "2019-08-03",
//       },
//     },
//     {
//       source: "4",
//       target: "5",
//       data: {
//         type: "已完成",
//         amount: "100,000,000,00 元",
//         date: "2019-08-03",
//       },
//     },
//     {
//       source: "2",
//       target: "3",
//       data: {
//         type: "已完成",
//         amount: "100,000,000,00 元",
//         date: "2019-08-03",
//       },
//     },
//     {
//       source: "2",
//       target: "4",
//       data: {
//         type: "待执行",
//         amount: "100,000,000,00 元",
//         date: "2019-08-03",
//       },
//     },
//     {
//       source: "5",
//       target: "6",
//       data: {
//         type: "待执行",
//         amount: "100,000,000,00 元",
//         date: "2019-08-03",
//       },
//     },
//     {
//       source: "4",
//       target: "7",
//       data: {
//         type: "待执行",
//         amount: "100,000,000,00 元",
//         date: "2019-08-03",
//       },
//     },
//   ],
// };

// G6.registerNode(
//   "round-rect",
//   {
//     //框 节点信息
//     drawShape: function drawShape(cfg, group) {
//       var width = cfg.style.width;
//       console.log(width, 'width');
//       var stroke = cfg.style.stroke;
//       var rect = group.addShape("rect", {
//         attrs: {
//           x: -20,
//           y: 0,
//           width: 100,
//           height: 30,
//           radius: 15,
//           stroke: stroke,
//           lineWidth: 1.2,
//           fillOpacity: 1,
//           textAlign: "center",
//         },
//       });
//       return rect;
//     },
//     drawLabel: function drawLabel(cfg, group) {
//       var labelCfg = cfg.labelCfg || {};
//       var style = this.getLabelStyle(cfg, labelCfg, group);
//       var label = group.addShape("text", {
//         attrs: {
//           text: cfg.label,
//           x: 0,
//           y: 0,
//           textAlign: "center",
//           textBaseline: "middle",
//           fill: style.fill,
//           fontSize: style.fontSize,
//           fontWeight: style.fontWeight,
//           fontFamily: style.fontFamily,
//         },
//         name: "text-shape",
//       });
//       return label;
//     },
//     getAnchorPoints: function getAnchorPoints() {
//       return [
//         [0, 0.5],
//         [1, 0.5],
//       ];
//     },
//     update: function update(cfg, item) {
//       var group = item.getContainer();
//       var children = group.get("children");
//       var node = children[0];
//       var circleLeft = children[1];
//       var circleRight = children[2];

//       var stroke = cfg.style.stroke,
//         labelStyle = cfg.labelStyle;

//       if (stroke) {
//         node.attr("stroke", stroke);
//         circleLeft.attr("fill", stroke);
//         // circleRight.attr("fill", stroke);
//       }
//     },
//   },
//   "single-shape"
// );

// G6.registerEdge("polyline", {
//   itemType: "edge",
//   draw: function draw(cfg, group) {
//     var startPoint = cfg.startPoint;
//     var endPoint = cfg.endPoint;
//     var Ydiff = endPoint.y - startPoint.y;
//     var slope = Ydiff !== 0 ? 500 / Math.abs(Ydiff) : 0;
//     var cpOffset = 16;
//     var offset = Ydiff < 0 ? cpOffset : -cpOffset;

//     var line1EndPoint = {
//       x: startPoint.x + slope,
//       y: endPoint.y + offset,
//     };
//     var line2StartPoint = {
//       x: line1EndPoint.x + cpOffset,
//       y: endPoint.y,
//     };

//     // 控制点坐标
//     var controlPoint = {
//       x:
//         ((line1EndPoint.x - startPoint.x) * (endPoint.y - startPoint.y)) /
//         (line1EndPoint.y - startPoint.y) +
//         startPoint.x,
//       y: endPoint.y,
//     };

//     var path = [
//       ["M", startPoint.x, startPoint.y],
//       ["L", line1EndPoint.x, line1EndPoint.y],
//       [
//         "Q",
//         controlPoint.x,
//         controlPoint.y,
//         line2StartPoint.x,
//         line2StartPoint.y,
//       ],
//       ["L", endPoint.x, endPoint.y],
//     ];

//     if (Ydiff === 0) {
//       path = [
//         ["M", startPoint.x, startPoint.y],
//         ["L", endPoint.x, endPoint.y],
//       ];
//     }

//     var line = group.addShape("path", {
//       attrs: {
//         path: path,
//         stroke: colorMap[cfg.data.type],
//         lineWidth: 1.2,
//         endArrow: false,
//       },
//     });

//     var labelLeftOffset = 8;
//     var labelTopOffset = 8;
//     // amount
//     var amount = group.addShape("text", {
//       attrs: {
//         text: cfg.data.amount,
//         x: line2StartPoint.x + labelLeftOffset,
//         y: endPoint.y - labelTopOffset - 2,
//         fontSize: 14,
//         textAlign: "left",
//         textBaseline: "middle",
//         fill: "#000000D9",
//       },
//     });
//     // date
//     var date = group.addShape("text", {
//       attrs: {
//         text: cfg.data.date,
//         x: line2StartPoint.x + labelLeftOffset,
//         y: endPoint.y + labelTopOffset + 4,
//         fontSize: 12,
//         fontWeight: 300,
//         textAlign: "left",
//         textBaseline: "middle",
//         fill: "#000000D9",
//       },
//     });
//     return line;
//   },
// });

// setTimeout(function () {
//   var graph = new G6.Graph({
//     container: "mountNode",
//     width: window.innerWidth,
//     height: window.innerHeight,
//     layout: {
//       type: "dagre",
//       rankdir: "LR",
//       nodesep: 30,
//       ranksep: 100,
//       nameFontSize: 32,
//     },
//     modes: {
//       default: [
//         {
//           type: "tooltip",
//           offset: 10,
//           formatText: (model) => {
//             // 格式化函数，可以返回文本或者 HTML, 这里返回label字段
//             return model.label;
//           },
//         },
//         {
//           // 点击
//           type: "click-select",
//           trigger: "click",
//         },
//         {
//           type: "brush-select", // 框选
//           brushStyle: {
//             // 设置框选样式，填充色，填充色透明度，边框色，边框宽度
//             fill: "",
//             fillOpacity: "",
//             stroke: "",
//             lineWidth: 1,
//           },
//           selectedState: "", // 选中的状态，默认是selected, 可以根据自己的需求设置样式
//           trigger: "", // 触发框选的动作
//         },
//         "scroll-canvas",
//         "zoom-canvas",
//         "drag-node",
//         "click-select",
//         "tooltip",
//         "create-edge",
//         "edge-tooltip",
//         "click-add-node",
//       ],
//     },
//     defaultNode: {
//       shape: "round-rect",
//       labelCfg: {
//         style: {
//           fill: "#000000A6",
//           fontSize: 30,
//         },
//       },
//       style: {
//         stroke: "#1E63EE",
//         width: 150,
//       },
//     },
//     defaultEdge: {
//       shape: "polyline",
//     },
//   });
//   graph.on("node:click", (e, item) => {
//     // 在控制台中打印节点的 ID
//     console.log("Node Clicked:", e, item);
//   });
//   graph.on('edge:click', ev => {
//     console.log('nodes:', ev);
//   });
//   graph.data(data);
//   graph.render();
//   graph.on("click", (evt) => {
//     console.log(evt);
//   });

//   var edges = graph.getEdges();
//   edges.forEach(function (edge) {
//     var line = edge.getKeyShape();
//     var stroke = line.attr("stroke");
//     var targetNode = edge.getTarget();
//     targetNode.update({
//       style: {
//         stroke: stroke,
//       },
//     });
//   });
//   graph.paint();
// }, 0);

var colorMap = {
  已完成: "#1E63EE",
  待执行: "#D8D8D8",
};
var data = {
  nodes: [
    {
      id: "1",
      label: "公司1",
      labelCfg: {
        style: {
          // 标签的样式属性。
          fill: "red", // 文本颜色
          fontSize: 20, // 文本大小
          fill: "#00FFFF", // 节点填充色
          backgroundColor: "#FFFF00",
          stroke: "#FFFF00",
          offset: 20,
          width: 150,
        },
      },
    },
    {
      id: "2",
      label: "确认模型",
    },
    {
      id: "3",
      label: "公司3",
    },
    {
      id: "4",
      label: "公司4",
    },
    {
      id: "5",
      label: "公司5",
    },
    {
      id: "6",
      label: "公司6",
    },
    {
      id: "7",
      label: "公司7",
    },
  ],
  edges: [
    {
      source: "1",
      target: "2",
      data: {
        type: "已完成",
        amount: "张三",
        date: "2019-08-03",
      },
    },
    {
      source: "4",
      target: "5",
      data: {
        type: "已完成",
        amount: "100,000,000,00 元",
        date: "2019-08-03",
      },
    },
    {
      source: "2",
      target: "3",
      data: {
        type: "已完成",
        amount: "100,000,000,00 元",
        date: "2019-08-03",
      },
    },
    {
      source: "2",
      target: "4",
      data: {
        type: "待执行",
        amount: "100,000,000,00 元",
        date: "2019-08-03",
      },
    },
    {
      source: "5",
      target: "6",
      data: {
        type: "待执行",
        amount: "100,000,000,00 元",
        date: "2019-08-03",
      },
    },
    {
      source: "4",
      target: "7",
      data: {
        type: "待执行",
        amount: "100,000,000,00 元",
        date: "2019-08-03",
      },
    },
  ],
};

G6.registerNode('round-rect', {
  drawShape: function drawShape(cfg, group) {
    var width = cfg.style.width;
    var stroke = cfg.style.stroke;
    var rect = group.addShape('rect', {
      attrs: {
        x: -width / 2,
        y: -15,
        width: width,
        height: 30,
        radius: 15,
        stroke: stroke,
        lineWidth: 1.2,
        fillOpacity: 1
      }
    });
    var circleLeft = group.addShape('circle', {
      attrs: {
        x: -width / 2,
        y: 0,
        r: 3,
        fill: stroke
      }
    });
    var circleRight = group.addShape('circle', {
      attrs: {
        x: width / 2,
        y: 0,
        r: 3,
        fill: stroke
      }
    });
    return rect;
  },
  getAnchorPoints: function getAnchorPoints() {
    return [[0, 0.5], [1, 0.5]];
  },
  update: function update(cfg, item) {
    var group = item.getContainer();
    var children = group.get('children');
    var node = children[0];
    var circleLeft = children[1];
    var circleRight = children[2];

    var stroke = cfg.style.stroke,
      labelStyle = cfg.labelStyle;


    if (stroke) {
      node.attr('stroke', stroke);
      circleLeft.attr('fill', stroke);
      circleRight.attr('fill', stroke);
    }
  }
}, 'single-shape');

G6.registerEdge('polyline', {
  itemType: 'edge',
  draw: function draw(cfg, group) {
    var startPoint = cfg.startPoint;
    var endPoint = cfg.endPoint;
    var centerPoint = {
      x: (startPoint.x + endPoint.x) / 2,
      y: (startPoint.y + endPoint.y) / 2
    };

    var Ydiff = endPoint.y - startPoint.y;

    var slope = Ydiff !== 0 ? 500 / Math.abs(Ydiff) : 0;

    var cpOffset = 16;
    var offset = Ydiff < 0 ? cpOffset : -cpOffset;

    var line1EndPoint = {
      x: startPoint.x + slope,
      y: endPoint.y + offset
    };
    var line2StartPoint = {
      x: line1EndPoint.x + cpOffset,
      y: endPoint.y
    };

    // 控制点坐标
    var controlPoint = {
      x: (line1EndPoint.x - startPoint.x) * (endPoint.y - startPoint.y) / (line1EndPoint.y - startPoint.y) + startPoint.x,
      y: endPoint.y
    };

    var path = [['M', startPoint.x, startPoint.y], ['L', line1EndPoint.x, line1EndPoint.y], ['Q', controlPoint.x, controlPoint.y, line2StartPoint.x, line2StartPoint.y], ['L', endPoint.x, endPoint.y]];

    if (Ydiff === 0) {
      path = [['M', startPoint.x, startPoint.y], ['L', endPoint.x, endPoint.y]];
    }

    var line = group.addShape('path', {
      attrs: {
        path: path,
        stroke: colorMap[cfg.data.type],
        lineWidth: 1.2,
        endArrow: false
      }
    });

    var labelLeftOffset = 8;
    var labelTopOffset = 8;
    // amount
    var amount = group.addShape('text', {
      attrs: {
        text: cfg.data.amount,
        x: line2StartPoint.x + labelLeftOffset,
        y: endPoint.y - labelTopOffset - 2,
        fontSize: 14,
        textAlign: 'left',
        textBaseline: 'middle',
        fill: '#000000D9'
      }
    });
    // type
    var type = group.addShape('text', {
      attrs: {
        text: cfg.data.type,
        x: line2StartPoint.x + labelLeftOffset,
        y: endPoint.y - labelTopOffset - amount.getBBox().height - 2,
        fontSize: 10,
        textAlign: 'left',
        textBaseline: 'middle',
        fill: '#000000D9'
      }
    });
    // date
    var date = group.addShape('text', {
      attrs: {
        text: cfg.data.date,
        x: line2StartPoint.x + labelLeftOffset,
        y: endPoint.y + labelTopOffset + 4,
        fontSize: 12,
        fontWeight: 300,
        textAlign: 'left',
        textBaseline: 'middle',
        fill: '#000000D9'
      }
    });
    return line;
  }
});


setTimeout(function () {
  var graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    layout: {
      type: 'dagre',
      rankdir: 'LR',
      nodesep: 30,
      ranksep: 100
    },
    modes: {
      default: [
        // {
        //   type: "tooltip",
        //   offset: 10,
        //   formatText: (model) => {
        //     // 格式化函数，可以返回文本或者 HTML, 这里返回label字段
        //     return model.label;
        //   },
        // },
        "scroll-canvas",
        "zoom-canvas",
        "drag-node",
        "click-select",
        "tooltip",
        "create-edge",
        "edge-tooltip",
        "click-add-node",
        "brush-select",
        "click"
      ]
    },
    defaultNode: {
      shape: 'round-rect',
      labelCfg: {
        style: {
          fill: '#000000A6',
          fontSize: 10
        }
      },
      style: {
        stroke: '#72CC4A',
        width: 150
      }
    },
    defaultEdge: {
      shape: 'polyline'
    }
  });
  graph.on("node:click", (e, item) => {
    // 在控制台中打印节点的 ID
    console.log("Node Clicked:", e, item);
  });
  graph.on("click", (evt) => {
    console.log(evt, 'click');
  });
  graph.on('edge:click', ev => {
    console.log('nodes:', ev);
  });
  graph.data(data);
  graph.render();
  var edges = graph.getEdges();
  edges.forEach(function (edge) {
    var line = edge.getKeyShape();
    var stroke = line.attr("stroke");
    var targetNode = edge.getTarget();
    targetNode.update({
      style: {
        stroke: stroke,
      },
    });
  });
  graph.paint();
}, 0);
</script>



<style>
/* these are necessary styles for vue flow */

@import "@vue-flow/core/dist/style.css";

/* this contains the default theme, these are optional styles */

@import "@vue-flow/core/dist/theme-default.css";

#mountNode,
canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>